<template>
  <div class="container">
    <van-search v-model="strMaterialname" shape="round" @search="onSearch" placeholder="请输入标签名称"/>
    <div class="section">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="fetchData"
      >
        <van-swipe-cell
          v-for="(item, index) in listData"
          ref="vanSwipeCell"
          :right-width="60"
          :key="index"
        >
          <!-- :before-close="beforeClose" -->
          <van-card
            @click="toDetails(item)"
            :title="item.strMaterialname"
            :desc="item.iTypename"
            :thumb="item.strDownload"
          >
            <div slot="tags" class="van-card__desc van-ellipsis">{{item.strDownload}}</div>
          </van-card>
          <van-button square slot="right" type="danger" @click="deleteRow(item, $event)" text="删除"/>
        </van-swipe-cell>
      </van-list>
    </div>
    <div class="btnBox">
      <van-button type="info" class="vant-btn-dark" @click="toAddPage">添加</van-button>
    </div>
  </div>
</template>

<script>
  import {getList, deletRow} from '../../api/material'

  export default {
    name: 'Material',
    data() {
      return {
        list: [],
        finished: false,
        finishedText: '',
        pagenum: 1,
        listData: [],
        strMaterialname: '',   //搜索
        value: '',
        pages: 0,
        error: false,
        loading: false
      }
    },
    created() {
      // this.fetchData()
    },
    methods: {
      onSearch(val) {

        // 需修改接口 无法模糊搜索
        console.log(val)
        this.pagenum = 1
        this.listData = []
        this.fetchData()
      },
      onLoad() {
        console.log('onload')
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          // for (let i = 0; i < 10; i++) {
          //   this.list.push(this.list.length + 1)
          // }
          getList({iOrgnum: '180000021', pagenum: 1, strMaterialname: this.strMaterialname}).then(res => {
            console.log(res)
            this.listData = res && res.data
          })

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.listData.length >= 5) {
            this.finished = true
          }
        }, 1000)
      },
      toDetails(row) {
        this.$router.push({
          path: 'details',
          query: {row: JSON.stringify(row)}
        })
      },
      async fetchData() {
        this.loading = true
        let ret = await getList({iOrgnum: '180000021', pagenum: this.pagenum, strMaterialname: this.strMaterialname})
        // if (!ret) {
        //   console.log('没了')
        //   return false
        // }
        this.loading = false
        if (ret && ret.data) {
          const {currentpage, data, pagenum, total} = ret
          // this.listData = data

          let list = data || []
          if (pagenum > 1) {
            this.listData = [...this.listData, ...list]
          } else {
            this.listData = list
          }
          if (total % 5 === 0) {
            this.pages = total / 5
          } else {
            this.pages = parseInt(total / 5) + 1
          }
          console.log(this.pages)
          // 如果当前页数 = 总页数，则已经没有数据
          if (currentpage === this.pages) {
            this.finished = true
            this.finishedText = '- 没有更多了-'
          }
          // 如果总页数大于当前页码，页码+1
          if (this.pages > currentpage) {
            this.pagenum++
          }
        }

        // await getList({ iOrgnum: '180000021', pagenum: 1 }).then(res => {
        //   console.log(res)
        //   this.listData = res && res.data
        // })
      },
      deleteRow(item, event) {
        event.stopPropagation()
        // this.beforeClose({'right',event})
        this.$dialog
          .confirm({
            message: '确定删除吗？'
          })
          .then(() => {
            deletRow({idInfo: [item.id]}).then(res => {
              console.log(res)
              this.$toast.success('删除成功')
              setTimeout(() => {
                this.pagenum = 1
                this.listData = []
                this.fetchData()
              }, 1000)
            })
          })
      },
      beforeClose({position, instance}) {
        console.log('instance', instance)
        console.log('position', position)
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close()
            break
          case 'right':
            this.$dialog
              .confirm({
                message: '确定删除吗？'
              })
              .then(() => {
                instance.close()
              })
            break
        }
      },
      toAddPage() {
        this.$router.push('addMaterial')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;

    .section {
      height: calc(100vh - 188px);
      overflow: auto;
    }

    .section + .btnBox {
      display: flex;
      justify-items: center;
      align-items: center;
      border-top: 1px solid #f5f5f5;
      background-color: #ffffff;
      margin: 16px 16px 0 16px;

      button {
        flex: 1;
      }
    }
  }

  .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }

  .van-card {
    background: #ffffff;
    border-bottom: 1px solid #f3f3f3;

    .van-card__thumb {
      padding: 8px;
    }

    .van-card__title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .van-card__desc {
      font-weight: 500;
    }
  }
</style>
